Head in the Clouds, Feet on the Keyboard
Tuesday, March 4, 2025
Here's how I got this all rolling. I wanted to host a simple static website, so naturally, I gravitated towards Azure Static Web Apps. It turned out to be a pretty smooth process! I also dove into GitHub for the first time to manage the code for my site. There was a bit of a learning curve, but once I got the hang of it, things clicked. Then, I added a custom domain to make it all feel more official. I'm going to share exactly how it worked for me, and if you have no idea what an Azure Static Web App is, click here. (Don't worry, I had to pay the site a visit too!)
So, once I decided to go with Azure Static Web Apps, I logged into the Azure portal, clicked on "Create Resource" and then searched for "Static Web App". The setup wizard walks you through the entire process with a series of tabs to follow. First, you select the subscription and resource group where you want to deploy the app. Then, you pick a name for your app and choose your preferred plan type. For most of the options, I just decided to leave the defaults, as they seemed to work fine for my needs. It was all pretty intuitive, but here's where I ran into something new: linking it to my GitHub repository.
This part felt a little intimidating at first because I have never really used Github before so this is where the bulk of my troubles came from, I created my GitHub account. It then it prompted me to create a repository, Once the repo was created I opted to use the Github Desktop application to deploy my code, Microsoft recommends the CLI method, I tried the command line method first, but I ran into issues. Let's just say, my scripting skills need some work. Once the desktop application was connected to my Github account, I saw the repo I just created and was able to push my code with ease.
This is how I organized my code locally in VSCode before pushing it to GitHub.
However, one issue I ran into was trying to import my code into GitHub in the exact same structure I built it out in. I was organizing my files in folders locally, and it wasn't always clear how to maintain that folder structure when pushing it to GitHub. It took a couple of attempts to get it just right, but eventually, I figured it out.
Quick disclaimer: You do not have to code this project from scratch. You are more than welcome to use HTML and CSS templates to get started, as it doesn't affect the overall process or the concept of the project. Using templates is a perfectly fine way to speed things up or focus on other areas, like hosting and deployment, instead of building everything from scratch.
After I had the code properly structured in GitHub, I revisited the Azure Static Web Apps setup to tie everything together. At this point, I returned to the Azure portal and completed the initial steps from my first paragraph—selecting the subscription, resource group, app name, and plan. With everything set up, I continued the process of deploying my static website. Azure Static Web Apps made it pretty seamless from here on out, automatically building and deploying the site once I connected my GitHub repository. It didn’t take long, and before I knew it, my site was live with a URL provided by Azure.
With the website live, the next step was to add a custom domain to make everything feel more official. I was ready to take it beyond the default Azure URL. I decided to use a third-party domain provider to purchase my domain, but Azure also offers the option to buy and manage domains directly through Azure App Service Domains. Setting up the custom domain was straightforward, but I did need to make sure my DNS settings were configured correctly. In the Azure portal, I navigated to the ‘Custom Domains’ section, where I added the domain I wanted to use. From there, it was just a matter of following the steps to verify ownership of the domain. I created a TXT record to validate my new domain name. Once the validation was successful, I was able to proceed with creating the CNAME record. Once the DNS records were updated, it was only a matter of time before the custom domain pointed to my site. In the end, it worked smoothly, and my website now had a professional touch with its own domain.
Oh, and now that the site has a proper domain, don't forget to bookmark it—unless you enjoy the thrill of trying to remember URLs from memory. No judgment if that's your thing!
Setting up my static website on Azure and linking it with GitHub turned out to be a smoother process than I initially expected. Sure, I ran into a few challenges—hello, GitHub Desktop—but working through them was all part of the learning experience. Now that everything is in place, I'm glad I took the time to figure it out. If you're looking to do something similar, hopefully, this gives you a little confidence to get started. And if coding everything from scratch isn’t your thing, don’t worry, using an HTML and CSS template works just as well.
Thanks for taking the time to read about my experience! This is just the beginning, and there's plenty more to explore. I know the images aren't loading properly right now, but that's all part of the journey. In the next blog, I'll be diving into Azure CDN to tackle this issue and improve performance.
Resources